Top app bar Guidelines 頂部應用欄指導規則
Usage 用法
頂部應用欄用來顯示當前頁面的重要資訊和功能按鈕。主要包括：頁面標題、返回按鈕和其他常用功能。這些內容主要服務於當前頁面的需求，有時也可以幫助使用者快速切換到其他重要功能。
Anatomy 結構
Container 容器
Navigation icon 導航圖示
前置導航圖示通常用於：
- 選單圖示（Hamburger icon），開啟導航抽屜。
- 返回箭頭（Back arrow），返回上一級頁面。
Headline 標題
- 當前所處的部分（例如應用中的特定分類）。
- 當前頁面的名稱（例如“電影”）。
- 標題應完整展示，避免截斷或換行。
- 如果標題較長，建議使用大型頂部應用欄，以允許標題佔據兩行。
Trailing interactive icons字尾互動式圖示
- 最多可包含 3 個互動圖示，並放置在標題的後面（靠近容器的末端）。
- 最常用的操作按鈕應靠左，其次向右依次排列。
- 超過 3 個操作時，應將次要操作摺疊到溢位選單（Overflow Menu）中。
Responsive Layout 響應式佈局
頂部應用欄在不同的視窗大小下都會佔據螢幕的 100% 寬度。
Compact 緊湊型
適用於小螢幕裝置，頂部應用欄橫向填滿整個螢幕。
b 中等模式（Medium） – 適用於平板裝置或大螢幕手機，同樣橫向拉伸至全屏。
c 擴充套件模式（Expanded） – 適用於桌面端，應用欄仍保持100% 屏寬。
3 對齊方式（Alignment）
所有元素都應對齊到容器的起始或末端。支援 RTL（從右到左）佈局，在阿拉伯語、希伯來語等語言環境下，圖示和文字的對齊方向會自動調整。
Behavior 行為
Scrolling 滾動互動
- 頂部應用欄通常與內容在同一層級，但在滾動時會發生變化。
- 滾動時，應用欄的背景色會填充，以增強與背景內容的視覺區分。
Compress Effect 壓縮效果
- 向上滾動時，頂部應用欄可以隱藏或壓縮為更小的高度。
- 向下滾動時，頂部應用欄重新顯示。
- 中型頂部應用欄（Medium） 在滾動時可以轉換為緊湊模式（Compact），但不會自動恢復，需要使用者滾動回頁面頂部。
Nesting Actions 巢狀操作
當螢幕大小調整時，頂部應用欄的大小也會動態調整。額外的操作按鈕會自動合併到溢位選單，以適應螢幕的縮放。。
Responsiveness 響應式適配
頂部應用欄的寬度會根據裝置或檢視的大小進行自適應調整。在不同裝置上，頂部應用欄始終保持 100% 屏寬，確保一致的使用者體驗。
Interaction & style 互動與樣式
Touch 觸控
當使用者點選圖示按鈕時，會出現觸控波紋，表示互動反饋。
Cursor 游標
當滑鼠移到按鈕上時，按鈕會顯示特殊效果來提示使用者可以點選。點選按鈕時會出現波紋動畫，讓使用者知道點選已被識別。這個反饋效果在按鈕任何狀態下都會顯示。
Container 容器
Headline 標題
Leading navigation icon 主導導航圖示
Trailing interactive icons